import React, { Component, Fragment } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Card,
  Button,
  Steps,
  Row,
  Col,
  Radio,
  Checkbox,
  Select,
  Input,
  DatePicker,
  message,
  Modal,
  Table,
} from 'antd';
import { connect } from 'dva';
import Link from 'umi/link';
import moment from 'moment';
import queryString from 'query-string';
import router from 'umi/router';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Result from '@/components/Result';
import bill from '@/assets/bill.png';
import foreign from '@/assets/foreign.png';
import StandardTable from '@/components/StandardTable';
import styles from './style.less';
import Customer from '../../components/Customer';
import Supplier from '../../components/NsSupplier';
import ClaimInfor from './ClaimInfor';
import LineWrap from '../../components/LineWrap'; // td溢出折行组件

const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const { Step } = Steps;
const { Option } = Select;
const steps = [
  {
    title: '选择账单',
    content: 'First-content',
  },
  {
    title: '差额处理',
    content: 'Second-content',
  },
  {
    title: '完成',
    content: 'third-content',
  },
];

@connect(({ remitclaim, login, loading }) => ({
  remitclaim,
  login,
  loading: loading.models.remitclaim,
  modalTableLoading: loading.effects['remitclaim/fetchClmAdjustBill'],
}))
@Form.create()
class RemitClaimDetail extends Component {
  state = {
    current: 0,
    selectedRows: [],
    selectedRowKeys: [],
    selectedModalRows: [],
    selectedModalRowKeys: [],
    resultData: {},
    isHdlAmo: false,
    isDiffAmo: false,
    isPartClaim: false,
    isTransBalance: false,
    isDiffOk: false,
    radioFlag: true,
  };

  tableSearchLayout = {
    labelCol: { xl: { span: 5 }, xxl: { span: 7 } },
    wrapperCol: { xl: { span: 19 }, xxl: { span: 17 } },
  };

  formItemLayout = {
    labelCol: {
      sm: { span: 8 },
    },
    wrapperCol: {
      sm: { span: 16 },
    },
  };

  formItemLayout1 = {
    labelCol: {
      xxl: { span: 6 },
      xl: { span: 7 },
    },
    wrapperCol: {
      xxl: { span: 17 },
      xl: { span: 16 },
    },
  };

  componentDidMount() {
    const { location, dispatch } = this.props;
    const { claimTypeId } = queryString.parse(location.search);

    dispatch({
      type: 'remitclaim/updateModelData',
      payload: {
        claimTypeId,
      },
    });
    this.initialData(claimTypeId);
    dispatch({
      type: 'remitclaim/fetchSupplyList',
      payload: {},
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    const opermars = {
      claimFormFieldsValue: {},
      pageDataStep: {
        list: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
        },
      },
      payApplySubmitData: {
        firstStep: {},
      },
      searchListDataSource: {
        supplierList: [], // 供应商
        serType_List: [],
      },
      pageDataModal: {
        list: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
        },
      },
      claimTypeId: null,
      radioValue: true,
      remitDetail: { clmRcrdList: [], clmRemit: {} },
      claimDetail: { remitList: [], dataRcrdsList: [], diffRcrdList: [] },
      processInfor: { remitList: [], dataRcrdsList: [], clmDiffRcrds: [] },
    };
    dispatch({
      type: 'remitclaim/updateModelData',
      payload: opermars,
    });
  }

  initialData = async claimTypeId => {
    const { dispatch } = this.props;
    await dispatch({
      type: 'remitclaim/initialPageData',
      payload: claimTypeId,
    });
    await this.getList();
  };

  // 第一个下一步
  next = () => {
    const { current, selectedRows, selectedRowKeys } = this.state;
    const {
      dispatch,
      remitclaim: {
        claimTypeId,
        payApplySubmitData: { firstStep },
      },
      login,
    } = this.props;
    let tip = '';
    const isJump = {};
    switch (Number(claimTypeId)) {
      case 1:
        isJump.flag = selectedRows.some(item => item.custId !== selectedRows[0].custId);
        if (isJump.flag) tip = '不同客户不能认领';
        break;
      case 2:
        isJump.flag = selectedRows.some(item => item.sendSuppId !== selectedRows[0].sendSuppId);
        if (isJump.flag) tip = '不同供应商不能认领';
        break;
      case 4:
        isJump.flag = selectedRows.some(item => item.serTypeId !== selectedRows[0].serTypeId);
        if (isJump.flag) tip = '不同服务类型不能认领';
        break;
      case 5:
        selectedRows.forEach(item => {
          if (item.ordRecvId !== selectedRows[0].ordRecvId) {
            isJump.flag = true;
          }
          if (item.serTypeId !== selectedRows[0].serTypeId) {
            isJump.flagOs = true;
          }
        });
        if (isJump.flag) tip = '不同服务类型不能认领';
        if (isJump.flagOs) tip = '不同接单方不能认领';
        break;
      case 6:
        isJump.flag = selectedRows.some(item => item.recvSuppId !== selectedRows[0].recvSuppId);
        if (isJump.flag) tip = '不同签约方不能认领';
        break;
      default:
        break;
    }
    if (selectedRowKeys.length) {
      if (tip.length) {
        message.warning(tip);
      } else {
        let feeAmoFlag = 1;
        if (
          firstStep.feeType &&
          (Number(firstStep.feeType) === 2 || Number(firstStep.feeType) === 3)
        ) {
          feeAmoFlag = selectedRows.reduce((prev, currentValue) => prev + currentValue.feeAmo, 0);
        }
        if (feeAmoFlag > 0) {
          const claimselectedRowKeys = window.sessionStorage.getItem('remitClaimselectedRowKeys');
          dispatch({
            type: 'remitclaim/fetchProcessInfor',
            payload: { remitIds: claimselectedRowKeys.split(','), beClmIds: selectedRowKeys },
          }).then(res => {
            if (res.success) {
              // 可用余额
              dispatch({
                type: 'remitclaim/fetchBalanceAval',
                payload: { beClmId: selectedRowKeys[0] },
              });
              // 调差余额查询
              dispatch({
                type: 'remitclaim/fetchQueryBusiParam',
                payload: { execCorpId: login.baseUser.corpId },
              });
              this.setState({
                current: current + 1,
              });
            } else {
              message.warning(res.message || '服务端错误');
            }
          });
        } else {
          message.warning('所选择数据的收费总金额总和必须大于0');
        }
      }
    } else {
      message.warning('至少选择一条数据');
    }
  };

  // 上一步
  previous = () => {
    const { current } = this.state;
    const {
      remitclaim: {
        pageDataStep: { pagination },
      },
    } = this.props;
    this.setState(
      {
        current: current - 1,
        isHdlAmo: false,
        isDiffAmo: false,
        isPartClaim: false,
        isTransBalance: false,
        isDiffOk: false,
        selectedRowKeys: [],
        selectedRows: [],
      },
      () => this.getList(pagination.current, pagination.pageSize, false)
    );
  };

  close = () => {
    router.push(`/fmmanage/remitclaim/index`);
  };

  save = () => {
    const { dispatch, form } = this.props;
    const { current, selectedRowKeys, isDiffOk, isHdlAmo, selectedModalRowKeys } = this.state;
    const claimselectedRowKeys = window.sessionStorage.getItem('remitClaimselectedRowKeys');

    form.validateFields({ focus: true }, (err, fieldsValue) => {
      const value = {};
      const arr =
        fieldsValue.clmDiffRcrds &&
        fieldsValue.clmDiffRcrds.filter(item => item.diffType !== undefined);
      if (isDiffOk || isHdlAmo) {
        value.clmDiffRcrds = arr.map(item => ({
          ...item,
          diffType: item.diffType[0],
          clmDataId:
            item.diffType[0] === 2 ? selectedModalRowKeys && selectedModalRowKeys[0] : undefined,
        }));
      } else {
        value.clmDiffRcrds = arr;
      }

      if (!err) {
        dispatch({
          type: 'remitclaim/fetchInsert',
          payload: {
            remitIds: claimselectedRowKeys.split(','),
            ...value,
            clmDataRcrds: selectedRowKeys,
          },
        }).then(response => {
          if (response.success) {
            window.sessionStorage.removeItem('remitClaimselectedRowKeys');
            this.setState({
              current: current + 1,
              resultData: response.data,
              isHdlAmo: false,
              isDiffAmo: false,
              isPartClaim: false,
              isTransBalance: false,
              isDiffOk: false,
              selectedRowKeys: [],
              selectedRows: [],
            });
          }
        });
      }
    });
  };

  handleSelectRows = (selectedRows, selectedRowKeys) => {
    this.setState({ selectedRows, selectedRowKeys });
  };

  handleStandardTableChange = pagination => {
    this.getList(pagination.current, pagination.pageSize);
  };

  updateTableData = e => {
    const {
      dispatch,
      remitclaim: { radioValue },
    } = this.props;
    dispatch({
      type: 'remitclaim/updateModelData',
      payload: {
        radioValue: !radioValue,
      },
    });
    dispatch({
      type: 'remitclaim/updateFeeType',
      payload: e.target.value,
    });
    this.setState({ selectedRows: [], selectedRowKeys: [] });
    this.getList(undefined, undefined, e.target.value);
  };

  getList = (currentPage = 1, pageSize = 10, feeType) => {
    const { form, dispatch } = this.props;
    form.validateFields((err, fieldsValue) => {
      const value = fieldsValue;
      if (feeType) {
        value.feeType = feeType;
      }
      dispatch({
        type: 'remitclaim/updateModelData',
        payload: { claimFormFieldsValue: value },
      });
      const tempVal = {};
      Object.keys(value).forEach(key => {
        if (String(key) === 'dateArr') {
          tempVal.startYm =
            value.dateArr && value.dateArr.length ? value.dateArr[0].format('YYYYMM') : null;
          tempVal.beginTime =
            value.dateArr && value.dateArr.length ? value.dateArr[0].format('YYYY-MM-DD') : null;
          tempVal.endYm =
            value.dateArr && value.dateArr.length ? value.dateArr[1].format('YYYYMM') : null;
          tempVal.endTime =
            value.dateArr && value.dateArr.length ? value.dateArr[1].format('YYYY-MM-DD') : null;
        } else {
          tempVal[key] = value[key] === undefined ? null : value[key].trim();
        }
      });
      delete tempVal.feeType;
      delete tempVal.dateArr;
      const pageArg = { currentPage, pageSize };
      const values = {
        tempVal,
        pageArg,
      };
      dispatch({
        type: 'remitclaim/fetchUpdateList',
        payload: values,
      });
    });
  };

  onMonthChanges = value => {
    const { form } = this.props;
    form.setFieldsValue({
      dateArr: value,
    });
  };

  // 补余额
  onRepairBalance = (e, value) => {
    const {
      dispatch,
      form,
      remitclaim: {
        processInfor: { clmDiffRcrds },
      },
    } = this.props;
    const { selectedRowKeys, isHdlAmo } = this.state;
    if (Number(value) === 1) {
      this.setState({ isHdlAmo: !isHdlAmo });
    }
    if (Number(value) === 2) {
      this.setState({
        isDiffAmo: !!e.length,
        isDiffOk: !e.length && false,
        selectedModalRowKeys: [],
        selectedModalRows: [],
      });
      dispatch({
        type: 'remitclaim/fetchClmAdjustBill',
        payload: { billIdList: selectedRowKeys },
      });
    }

    if (Number(value) === 3) {
      this.setState({ isPartClaim: true, isTransBalance: false, radioFlag: false });
      clmDiffRcrds.filter(item => item.diffType !== value);
      form.resetFields();
    }
    if (Number(value) === 4) {
      this.setState({ isTransBalance: true, isPartClaim: false, radioFlag: false });
      form.resetFields();
    }
  };

  diffOk = () => {
    const { selectedModalRows } = this.state;
    if (selectedModalRows.length === 1) {
      this.setState({
        isDiffAmo: false,
        isDiffOk: true,
      });
    } else {
      message.warning('选择一条账单数据');
    }
  };

  diffCancel = () => {
    const { form } = this.props;
    form.resetFields([`clmDiffRcrds[1][diffType]`]);
    this.setState({ isDiffAmo: false });
  };

  checkAmo = (rule, value, callback) => {
    const {
      remitclaim: { acctBalanceAval },
    } = this.props;
    const { isHdlAmo } = this.state;
    // billAmo 账单金额  billAdjAmoUprLmt 调差 acctBalance 差额
    const reg = /^[0-9]+(.[0-9]{1,2})?$/;
    if (!value || (isHdlAmo && value > acctBalanceAval) || !reg.test(value)) {
      return callback(`请输入的金额不超过可用余额`);
    }
    return callback();
  };

  checkAmoDiff = (rule, value, callback) => {
    const {
      remitclaim: { billAdjAmoUprLmt },
    } = this.props;
    const { isDiffOk, selectedModalRows } = this.state;
    const reg = /^[0-9]+(.[0-9]{1,2})?$/;
    if (isDiffOk) {
      if (selectedModalRows[0].billAmo < billAdjAmoUprLmt) {
        if (!value || value > selectedModalRows[0].billAmo || !reg.test(value)) {
          return callback(`请输入的金额不超过账单金额`);
        }
      }
      if (!value || value > billAdjAmoUprLmt || !reg.test(value)) {
        return callback(`请输入的金额不超过可调差金额`);
      }
    }
    return callback();
  };

  render() {
    const {
      remitclaim: {
        pageDataStep,
        payApplySubmitData: { firstStep },
        searchListDataSource,
        claimTypeId,
        processInfor,
        claimFormFieldsValue,
        acctBalanceAval,
        billAdjAmoUprLmt,
        pageDataModal,
      },
      loading,
      modalTableLoading,
      form: { getFieldDecorator },
    } = this.props;
    const {
      current,
      selectedRows,
      selectedRowKeys,
      isHdlAmo,
      isDiffAmo,
      isDiffOk,
      selectedModalRows,
      selectedModalRowKeys,
      isPartClaim,
      isTransBalance,
      resultData,
      radioFlag,
    } = this.state;

    // 结果页
    const information = (
      <div className={styles.information} style={{ lineHeight: '32px' }}>
        <Row>
          <Col span={4} className={styles.label}>
            认领金额（元）：
          </Col>
          <Col>{resultData.clmAmo || '--'}</Col>
        </Row>
        {resultData.clmDiffRcrdList &&
          resultData.clmDiffRcrdList.length &&
          resultData.clmDiffRcrdList.map(item => (
            <Row key={item.diffType}>
              <Col span={4} className={styles.label}>
                {item.diffTypeName}：
              </Col>
              <Col>{item.hdlAmo || '--'}</Col>
            </Row>
          ))}
      </div>
    );

    // 表格操作栏
    const renderDom = (text, record, item) => {
      if (item.type === 'jumpRoutingCs') {
        return (
          <Link to={`/chargemanage/customerbilling/billingsplit?billYm=${record.billYm}`}>
            拆单
          </Link>
        );
      }
      if (item.type === 'jumpRoutingNs') {
        return <Link to={`/chargmanage/chargebillns/split?billId=${record.billId}`}>拆单</Link>;
      }
      if (item.type === 'mouth') {
        return text ? moment(text).format('YYYY-MM') : '--';
      }
      if (item.type === 'date') {
        return text ? moment(text).format('YYYY-MM-DD') : '--';
      }
      if (item.prop === 'custName') {
        return <LineWrap content={text} />;
      }

      return text || '--';
    };
    const columnsInitial = firstStep.columns ? firstStep.columns : [];
    const renderColumn = columnsInitial['columns'.concat(claimTypeId).concat(firstStep.feeType)];
    const rowKey = columnsInitial['rowkey'.concat(claimTypeId).concat(firstStep.feeType)];
    const columns = renderColumn
      ? renderColumn.map((item, index) => ({
          title: item.label,
          dataIndex: item.prop,
          key: item.prop || index,
          onCell: () => ({ style: { textAlign: item.location ? item.location : null } }),
          onHeaderCell: () => ({
            style: {
              fontWeight: 'bold',
              textAlign: item.location ? item.location : null,
              width: item.width,
            },
          }),
          render: (text, record) => renderDom(text, record, item),
        }))
      : [];
    const columnNotOper = columns
      ? columns.map(item => ({
          ...item,
          className: item.dataIndex === 'operation' ? styles.hide : styles.show,
        }))
      : [];

    return (
      <div>
        <PageHeaderWrapper>
          <Card>
            <Steps current={current}>
              {steps.map(item => (
                <Step key={item.title} title={item.title} />
              ))}
            </Steps>
            <div className="steps-action">
              {current === 0 && (
                <Fragment>
                  <p style={{ margin: '28px 0px', borderBottom: '1px solid #ccc' }}>
                    {firstStep.title}
                    <span style={{ color: '#ccc', marginLeft: 4 }}>{firstStep.tip}</span>
                  </p>
                  <Form style={{ margin: '28 0' }}>
                    <Row gutter={16}>
                      {firstStep['searchList'.concat(claimTypeId).concat(firstStep.feeType)] &&
                        firstStep['searchList'.concat(claimTypeId).concat(firstStep.feeType)].map(
                          item => {
                            let content;
                            let span = 7;
                            let value;
                            switch (item.type) {
                              case 'input':
                                content = <Input placeholder="请输入" />;
                                break;
                              case 'radio':
                                span = 8;
                                value = item.dataSource[0].itemCode;
                                content = (
                                  <Radio.Group
                                    onChange={this.updateTableData}
                                    style={{ marginTop: 5 }}
                                  >
                                    {item.dataSource.map(itemCild => (
                                      <Radio value={itemCild.itemCode} key={itemCild.itemCode}>
                                        {itemCild.itemName}
                                      </Radio>
                                    ))}
                                  </Radio.Group>
                                );
                                break;
                              case 'searchCs':
                                content = <Customer allowClear />;
                                break;
                              case 'searchOs':
                                content = <Customer attr allowClear />;
                                break;
                              case 'NsSupplier':
                                content = <Supplier allowClear />;
                                break;
                              case 'select':
                                content = (
                                  <Select
                                    allowClear
                                    showSearch
                                    filterOption={(input, option) =>
                                      option.props.children
                                        .toLowerCase()
                                        .indexOf(input.toLowerCase()) >= 0
                                    }
                                    style={{ width: '100%' }}
                                    placeholder="请选择"
                                  >
                                    {searchListDataSource[item.dataSource] &&
                                      searchListDataSource[item.dataSource].map(it => (
                                        <Option key={it[item.id]}>{it[item.name]}</Option>
                                      ))}
                                  </Select>
                                );
                                break;
                              case 'date':
                                content = (
                                  <RangePicker
                                    placeholder={['开始年月', '结束年月']}
                                    format="YYYY-MM"
                                    mode={['month', 'month']}
                                    style={{ width: '100%' }}
                                    onPanelChange={this.onMonthChanges}
                                  />
                                );
                                break;
                              case 'dateTime':
                                content = (
                                  <RangePicker
                                    placeholder={['开始时间', '结束时间']}
                                    format="YYYY-MM-DD"
                                    style={{ width: '100%' }}
                                  />
                                );
                                break;
                              default:
                                break;
                            }
                            return (
                              <Col md={span} sm={24} key={item.prop}>
                                <FormItem label={item.label} {...this.tableSearchLayout}>
                                  {getFieldDecorator(`${item.prop}`, {
                                    initialValue: claimFormFieldsValue[item.prop] || value,
                                  })(content)}
                                </FormItem>
                              </Col>
                            );
                          }
                        )}
                      <Col md={1} sm={24}>
                        <Button
                          type="primary"
                          // style={{ marginTop: 3 }}
                          onClick={() => this.getList()}
                        >
                          查询
                        </Button>
                      </Col>
                    </Row>
                  </Form>
                  <StandardTable
                    loading={loading}
                    columns={columns}
                    selectedRows={selectedRows}
                    selectedRowKeys={selectedRowKeys}
                    onSelectRow={this.handleSelectRows}
                    onChange={this.handleStandardTableChange}
                    data={pageDataStep}
                    rowKey={rowKey}
                  />
                  <Row style={{ justifyContent: 'center', marginTop: 30 }}>
                    <Button onClick={() => this.close()}>关闭</Button>
                    <Button style={{ marginLeft: 30 }} type="primary" onClick={() => this.next()}>
                      下一步
                    </Button>
                  </Row>
                </Fragment>
              )}
              {current === 1 && (
                <div style={{ marginTop: 6 }}>
                  <ClaimInfor
                    {...{
                      foreign,
                      bill,
                      columns: columnNotOper,
                      selectedRows,
                      selectedRowKeys,
                      rowKey,
                      processInfor,
                      nonRemiAmount: true,
                      title: firstStep.progressTitle,
                    }}
                  />
                  {!!processInfor.clmDiffRcrds.length && (
                    <Card title="差额处理">
                      {/* 账单多 */}
                      {processInfor.clmDiffRcrds.map((item, index) => (
                        <Form key={item.diffType}>
                          {processInfor.remitFlag === -1 ? (
                            <Fragment>
                              <FormItem {...this.formItemLayout1} style={{ margin: 0 }}>
                                {getFieldDecorator(`clmDiffRcrds[${index}][diffType]`, {
                                  rules: [
                                    {
                                      required: false,
                                      message: '请选择',
                                    },
                                  ],
                                })(
                                  <Checkbox.Group
                                    style={{ width: '100%' }}
                                    onChange={e => this.onRepairBalance(e, item.diffType)}
                                  >
                                    <Row>
                                      <Col span={16}>
                                        <Checkbox value={item.diffType}>
                                          {item.diffName}
                                          {item.diffType === 1
                                            ? `(可用余额：${acctBalanceAval}元）`
                                            : `（最高可调差金额${billAdjAmoUprLmt}元，不能高于账单金额。）`}
                                        </Checkbox>
                                      </Col>
                                    </Row>
                                  </Checkbox.Group>
                                )}
                              </FormItem>
                              {isHdlAmo && index === 0 && (
                                <Row>
                                  <Col span={9}>
                                    <FormItem label="使用余额(元)" {...this.formItemLayout1}>
                                      {getFieldDecorator(`clmDiffRcrds[${index}][hdlAmo]`, {
                                        rules: [
                                          {
                                            required: true,
                                            validator: this.checkAmo,
                                          },
                                        ],
                                      })(<Input placeholder="请输入" />)}
                                    </FormItem>
                                  </Col>
                                </Row>
                              )}
                              {isDiffOk && index === 1 && (
                                <Fragment>
                                  <Row>
                                    <Col span={9}>
                                      <FormItem
                                        label="调差账单："
                                        {...this.formItemLayout1}
                                        style={{ margin: 0 }}
                                      >
                                        编号
                                        {selectedModalRows.length && selectedModalRows[0].billNo}，
                                        账单金额
                                        {selectedModalRows.length && selectedModalRows[0].billAmo}
                                      </FormItem>
                                    </Col>
                                  </Row>
                                  {/* 最大值为俩个余额的最小值 */}
                                  <Row>
                                    <Col span={9}>
                                      <FormItem
                                        label="调差金额(元)："
                                        {...this.formItemLayout1}
                                        style={{ margin: 0 }}
                                      >
                                        {getFieldDecorator(`clmDiffRcrds[${index}][hdlAmo]`, {
                                          rules: [
                                            {
                                              required: true,
                                              validator: this.checkAmoDiff,
                                            },
                                          ],
                                        })(
                                          <Input placeholder="请输入" style={{ width: '100%' }} />
                                        )}
                                      </FormItem>
                                    </Col>
                                    <Col span={12}>
                                      <span
                                        style={{
                                          color: '#f00',
                                          display: 'inline-block',
                                          marginTop: 9,
                                        }}
                                      >
                                        注：调差金额将作为账单收费项，从账单金额中减去。
                                      </span>
                                    </Col>
                                  </Row>
                                </Fragment>
                              )}
                            </Fragment>
                          ) : (
                            <Fragment>
                              <Col span={4} key={item.diffType}>
                                <FormItem {...this.formItemLayout} style={{ margin: 0 }}>
                                  {getFieldDecorator(`clmDiffRcrds[${index}][diffType]`, {
                                    rules: [
                                      {
                                        required: radioFlag,
                                        message: '请至少选择一项',
                                      },
                                    ],
                                  })(
                                    <Radio.Group
                                      style={{ width: '100%' }}
                                      onChange={e => this.onRepairBalance(e, item.diffType)}
                                    >
                                      <Radio value={item.diffType}>{item.diffName}</Radio>
                                    </Radio.Group>
                                  )}
                                </FormItem>
                              </Col>
                            </Fragment>
                          )}
                        </Form>
                      ))}
                      {isPartClaim && (
                        <Row>
                          <Col span={24}>
                            <FormItem {...this.formItemLayout} style={{ margin: 0 }}>
                              {processInfor.remitList.map(
                                i =>
                                  i.operAmo > 0 && (
                                    <p>
                                      汇款单编号：{i.remiCode} &nbsp; &nbsp; &nbsp;
                                      &nbsp;汇款单余额（元）：
                                      {i.operAmo}
                                    </p>
                                  )
                              )}
                            </FormItem>
                          </Col>
                        </Row>
                      )}
                      {isTransBalance && (
                        <Row>
                          <Col span={24}>
                            <FormItem {...this.formItemLayout} style={{ margin: 0 }}>
                              <p>
                                转账户余额（元）：
                                {processInfor.remitList.reduce(
                                  (prev, currentValue) => prev + currentValue.operAmo || 0,
                                  0
                                )}
                              </p>
                            </FormItem>
                          </Col>
                        </Row>
                      )}
                    </Card>
                  )}
                  <Row style={{ justifyContent: 'center', marginBottom: 10 }}>
                    <Button onClick={() => this.previous()}>上一步</Button>
                    <Button style={{ marginLeft: 30 }} type="primary" onClick={() => this.save()}>
                      提交
                    </Button>
                  </Row>
                </div>
              )}
              {current === 2 && (
                <Result
                  type="success"
                  title="操作成功"
                  extra={information}
                  actions={
                    <Fragment>
                      <Button onClick={() => router.push('/fmmanage/remitclaim/index')}>
                        完成
                      </Button>
                    </Fragment>
                  }
                  className={styles.result}
                />
              )}
              <Modal
                title={
                  <p>
                    选择调差账单
                    <span style={{ color: '#ccc', marginLeft: 4 }}>
                      (注：只能选择一个账单用于账单调差)
                    </span>
                  </p>
                }
                visible={isDiffAmo}
                onOk={this.diffOk}
                onCancel={this.diffCancel}
                destroyOnClose
                maskClosable={false}
                width="50%"
              >
                <Table
                  columns={columnNotOper}
                  selectedRows={selectedModalRows}
                  loading={modalTableLoading}
                  dataSource={pageDataModal.list}
                  rowKey={rowKey}
                  pagination={false}
                  rowSelection={{
                    type: 'radio',
                    selectedModalRowKeys,
                    onChange: (selectedKeys, selectRows) => {
                      this.setState({
                        selectedModalRows: selectRows,
                        selectedModalRowKeys: selectedKeys,
                      });
                    },
                  }}
                />
              </Modal>
            </div>
          </Card>
        </PageHeaderWrapper>
      </div>
    );
  }
}

export default RemitClaimDetail;
